<% layout('/layouts/default.html', {title: '室温动态', libs: ['dataGrid']}){ %>
<style type="text/css">
    *{
        margin:0;
        padding:0;
        border:0;
        outline:0;
        list-style:none;
        color: #333;
    }
    body{
        background: none;
    }
    .top_box{
        float: left;
        width: 99%;
    }
    .title{
        float: left;
        width: 50%;
        text-align: left;
        height: 40px;
        line-height: 40px;
        color: #333333;
        font-size: 18px;
        font-weight: normal;
        margin: 10px 0 0 0;
        margin-left: 2%;
    }
    .top_btn{
        float: right;
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #FFFFFF;
        background: #0099cc;
        font-size: 15px;
        margin-top: 15px;
        border-radius: 4px;
    }
    .top_btn:hover{
        background: #0186b3;
    }
    .content{
        float: left;
        width: 99%;
        background: #fff;
        padding: 10px 0;
        background: url(${ctxStatic}/swjk64.jpg) no-repeat;
        background-size: 100% 100%;
    }

    .td_span{
        float: left;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #333333;
        text-align: left;
        text-indent: 24px;
    }


    .scroll_top{
        position: fixed;
        z-index: 1000;
        right: 1%;
        bottom: 20%;
        width: 40px;
        height: 40px;
        display: none;
    }
    .scroll_top img{
        display: block;
        width: 40px;
        height: 40px;
    }
    .alert_box{
        display: none;
        position: fixed;
        top: 30%;
        width: 15%;
        height: 114px;
        left: 42.5%;
        background: #FFFFFF;
        box-shadow: 4px 4px 8px #888;
        z-index: 9999;
    }
    .alert_text{
        width: 90%;
        padding: 0 5%;
        text-align: center;
        font-size: 15px;
        color: #333333;
        line-height: 24px;
        height: 24px;
        margin-top: 30px;
    }
    .alert_close{
        float: left;
        width: 50%;
        text-align: center;
        color: #fff;
        height: 30px;
        line-height: 30px;
        background: #d2d2d2;
        margin-top: 30px;
        cursor: pointer;
    }
    .alert_del{
        float: left;
        width: 50%;
        text-align: center;
        color: #fff;
        background: #0186b3;
        height: 30px;
        line-height: 30px;
        margin-top: 30px;
        cursor: pointer;
    }
    .remind_box{
        display: none;
        position: fixed;
        top: 30%;
        width: 15%;
        height: 114px;
        left: 42.5%;
        background: rgba(0, 0, 0, 0.55);
        z-index: 9999;
        border-radius: 4px;
    }
    .remind_box_title{
        float: left;
        width: 100%;
        height: 114px;
        line-height: 114px;
        text-align: center;
        color: #FFFFFF;
        font-size: 18px;
    }
    .remind_box_icon{
        display: block;
        margin: 15px auto auto auto;
        width: 50px;
    }
    .head_box{
        float: left;
        width: 99%;
        background: #fff;
        margin-bottom: 10px;
    }


    /*日历样式*/
    .rili_box{
        float: left;
        margin-left: 5px;
    }
    .glyphicon{
        float: left;
        line-height: none;
        width: 16px;
        margin-top: 7px;
    }
    .rili_text{
        float: left;
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        margin-left: 6px;
        padding-right: 4px;
    }
    .caret{
        margin-top: 7px;
    }
    /*日历样式*/
    .head_box2{
        float: left;
        width: 99%;
        padding: 10px 0;
    }
    .head_box2_btn{
        float: right;
        width: 44px;
        height: 30px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        border-radius: 4px;
        background: #16a1c7;
        margin-left: 10px;
        cursor: pointer;
    }
    .head_box2_btn:hover{
        background: #057d9e;
    }
    .head_box2-title{
        float: left;
        height: 30px;
        line-height: 30px;
        color: #333;
        margin-left: 5px;
        font-size: 14px;
    }
    .head_box2_sel{
        float: left;
        width: 80px;
        margin-left: 5px;
        height: 30px;
        border-radius: 4px;
        border: 1px solid #E9E9E9;
        color: #333333;
        background: url(${ctxStatic}/e30.png) no-repeat;
        background-position:  90% center;
        background-size: 7.5px 4px;
        padding-left: 5px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -moz-appearance: none;
    }
    .head_box2_sel::-ms-expand { display: none; }
    .head_box2_search{
        float: left;
        width: 200px;
        height: 30px;
        text-align: left;
        border: 1px solid #E9E9E9;
        border-radius: 4px;
        color: #333333;
        margin-left: 5px;
        padding-left: 5px;
    }

    .radio_btn{
        float: left;
        width: 16px;
        height: 16px;
        background: url(${ctxStatic}/swjk47.png) no-repeat;
        background-size: 16px;
        margin-left: 10px;
        margin-top: 6px;
    }

    .radio_btn img{
        display: block;
        width: 16px;
        height: 16px;
    }
    .td_btn {
        cursor: pointer;
        padding: 0 5px;
    }
    .td_btn img {
        width: 21px;
        height: 21px;
    }



    .head_box2_href {
        float: right;
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        border-radius: 4px;
        background: #16a1c7;
        margin-left: 10px;
        cursor: pointer;
    }

    .head_box2_href:hover {
        background: #057d9e;
    }


    /*实时动态*/
    .chart_top{
        float: left;
        width: 100%;
        height: 30px;
    }
    .chart_top_title{
        float: left;
        width: 120px;
        padding-left: 30px;
        height: 30px;
        text-align: left;
        line-height: 30px;
        color: #fff;
        font-size: 16px;
        margin-left: 2%;
        font-weight: 600;
        background: url(${ctxStatic}/swjk71.png) no-repeat;
        background-size: 18px 18px;
        background-position: left center;
    }
    .chart_top_center{
        float: left;
        width: 140px;
        height: 30px;
        text-align: left;
        line-height: 30px;
        color: #fff;
        font-size: 14px;
        margin-left: 20px;
    }
    .full_screen{
        float: right;
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #fff;
        margin-right: 2%;
    }
    .chart_left{
        float: left;
        width: 50px;
        margin-left: 2%;
        margin-top: 10px;
    }
    .chart_left li{
        float: left;
        width: 100%;
        height: 55px;
        line-height: 55px;
        font-size: 14px;
        color: #fff;
        text-align: left;
    }
    .chart_right{
        margin-top: 36px;
        float: left;
        width: 91%;
        height: 444px;
    }
    .chart_right_box1{
        float: left;
        width: 100%;
        height: 114px;
        background: url(${ctxStatic}/swjk65.png) no-repeat;
        background-size: 115% 4px;
        background-position: center 102px;
        position: relative;
    }

    .chart_right_box2{
        float: left;
        width: 100%;
        height: 56px;
        background: url(${ctxStatic}/swjk66.png) no-repeat;
        background-size: 115% 4px;
        background-position: center bottom;
        position: relative;
    }

    .chart_right_box3{
        float: left;
        width: 100%;
        height: 26px;
        background: url(${ctxStatic}/swjk67.png) no-repeat;
        background-size: 115% 4px;
        background-position: center bottom;
        position: relative;
    }
    .chart_right_box4{
        float: left;
        width: 100%;
        height: 255px;
        position: relative;
    }
    .chart_detail{
        width: 12px;
        height: 12px;
        border-radius: 6px;
        position: absolute;
        cursor: pointer;
    }
    .chart_detail.red{
        background: url(${ctxStatic}/swjk68.png) no-repeat;
        background-size: 100% 100%;
        background-position: center center;
    }
    .chart_detail.blue{
        background: url(${ctxStatic}/swjk70.png) no-repeat;
        background-size: 100% 100%;
        background-position: center center;
    }
    .chart_detail.green{
        background: url(${ctxStatic}/swjk69.png) no-repeat;
        background-size: 100% 100%;
        background-position: center center;
    }
    .chart_hover{
        display: none;
        position: absolute;
        top: -150px;
        left: 20px;
        width: 200px;
        padding: 0 10px;
        background: #fff;
        box-shadow: 3px 3px 3px #e5e5e5;
        border: 1px solid #E9E9E9;
        z-index: 999;
    }
    .chart_hover li{
        width: 160px;
        line-height: 30px;
        color: #333333;
        font-size: 14px;
        text-align: left;
    }
    .chart_hover li:nth-child(1){
        color: #16a1c7;
        font-size: 20px;
    }
    .chart_detail:hover .chart_hover{
        display: block;
    }
    /*实时动态*/
</style>
<div class="main-content">
    <div class="box box-main">
        <div class="box-body">
            <#form:form id="searchForm" model="${abData}" action="${ctx}/ab/abData/listData" method="post" class="form-inline" >
            <div class="form-group">
                <label class="control-label">${text('供热公司部门')}：</label>
                <div class="control-inline">
                    <#form:input path="companyName" maxlength="200" class="form-control width-120"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">${text('行政区域')}：</label>
                <div class="control-inline">
                    <#form:input path="areaName" maxlength="200" class="form-control width-120"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">${text('小区楼宇')}：</label>
                <div class="control-inline">
                    <#form:input path="floorName" maxlength="200" class="form-control width-120"/>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-sm">${text('查询')}</button>
                <button type="reset" class="btn btn-primary btn-sm">${text('重置')}</button>
                <button type="button" class="btn btn-primary btn-sm">${text('查看实时温度')}</button>
            </div>
        </#form:form>
        </div>

        <!-- 加载中 -->
        <input type='hidden' id="level_type" value="company"/><input type='hidden' id="level_name" value="九台荣祥供热有限公司"/>
        <div class="content">
            <div class="chart_top">
                <p class="chart_top_title">实时动态</p>
                <p class="chart_top_center" id="max">最高温度：34.8°C</p>
                <p class="chart_top_center" id="min">最低温度：25.1°C</p>
                <p class="chart_top_center" id="avg">平均温度：28.2°C</p>
                <p class="chart_top_center" id="total">接收计数：608条</p>
                <p class="chart_top_center">层级计数：671条</p>
                <a class="full_screen" href="${ctx}/ab/abData/dongtai_full/?level_type=company&amp;level_name=九台荣祥供热有限公司" target="_blank">全屏查看</a>
            </div>
            <ul class="chart_left"></ul>
            <div class="chart_right">
                <div class="chart_right_box1"></div>
                <div class="chart_right_box2"></div>
                <div class="chart_right_box3"></div>
                <div class="chart_right_box4"></div>
            </div>
        </div>
        <!--提示-->
        <div class="remind_box">
            <span class="remind_box_title"></span>
        </div>
    </div>
</div>
<!--提示-->
<img src="${ctxStatic}/swjk68.png" style="display: none;"><img src="${ctxStatic}/swjk69.png" style="display: none;"><img
        src="${ctxStatic}/swjk70.png" style="display: none;">
<script src="${ctxStatic}/jquery/jquery-1.12.4.min.js"></script>

<script>

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    $.ajaxSetup({
        beforeSend: function(xhr, settings){
            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        }
    });

    //图数据
    function push_data(userlist){
        userlist = [
            {"id":1,"title":"35°C"},
            {"id":2,"title":"30°C"},
            {"id":3,"title":"25°C"},
            {"id":4,"title":"20°C"},
            {"id":5,"title":"15°C"},
            {"id":6,"title":"10°C"},
            {"id":7,"title":"5°C"},
            {"id":8,"title":"0°C"},
            {"id":9,"title":"-5°C"}
        ];
        for(var i = 0,n;n = userlist[i]; i++)
        {
            var li=document.createElement("li");
            li.id="d"+i;
            li.innerHTML=n.title;
            document.getElementsByClassName("chart_left")[0].appendChild(li);
        }
    }push_data();

    gwlist =  [];
    lasttime = '';
    totalnum = 0;
    maxtemp = 0;
    mintemp = 100;
    avgtemp = 0;
    countnum = 0;


    //条目总数据
    var table_rows= 0;
    var q=0;
    var chart_right=document.getElementsByClassName("chart_right")[0];
    var boxw=chart_right.clientWidth / 1.3;



    if(q >= 0){

        url = '${ctx}/ab/abData/listAll';
        level_type = $("#level_type").val();
        level_name = $("#level_name").val();
        data = { lasttime: lasttime, need: 1000, level_type: level_type, level_name: level_name }
        $.ajax({ type:'POST',
            url:url,
            data:data,
            success: function( result ) {
                q = 0;
                gwlist = [];
                T = result;
                for( i in result ){
                    totalnum ++;
                    gwlist.push( {
                        id:totalnum,
                        wendu:T[i]['inValue'],
                        username:T[i]['name'],
                        cwid:T[i]['dateCode'],
                        address:T[i]['addr'],
                        mianji:T[i]['square'],
                        register_time:T[i]['regdate'],
                        xinghao:T[i]['htype'],
                        dianxing:T[i]['classic'],
                        fa_id:T[i]['valveid'],
                        faxinghao:T[i]['vtype'],
                        fasuo:T[i]['vlock'],
                        shijian:T[i]['temptime'],
                    } );

                }
                table_rows = T.length;
                lasttime = new Date();
                jj = 0;
                animate_sel(lasttime,1000,level_type, level_name,jj,table_rows);

            },
            error: function( result ) { },
        } );

    }


    function animate_sel(a,b,c,d,jj,table_rows){

        var q_sel=setInterval(function (){   //计时器每一秒增加一数组总长度除以10
            jj=jj+1;

            //当没有数据的时候间隔15秒后再次获取
            var n=gwlist[q];

            if(!n){
                clearInterval(q_sel);
            }else{


                if(n.wendu=='undefined'){
                    maxtemp =maxtemp;
                    $("#max").text( "最高温度："+parseFloat(maxtemp).toFixed(1)+"°C");
                    mintemp =mintemp;
                    $("#min").text( "最低温度："+parseFloat(mintemp).toFixed(1)+"°C");
                }else{
                    //最高温度
                    if( n.wendu > maxtemp&&n.wendu<=35 ){
                        maxtemp = n.wendu;
                        $("#max").text( "最高温度："+parseFloat(maxtemp).toFixed(1)+"°C");
                    }

                    //最低温度
                    if( n.wendu < mintemp&&n.wendu >= -5 ){
                        mintemp = n.wendu;
                        $("#min").text( "最低温度："+parseFloat(mintemp).toFixed(1)+"°C");
                    }
                }

                //平均温度
                avgtemp = (avgtemp * countnum + parseFloat(n.wendu) )/(countnum+1);
                $("#avg").text( "平均温度："+parseFloat(avgtemp).toFixed(1)+"°C");
                //计数条目
                countnum += 1;
                $("#total").text( "接收计数："+countnum+"条");
                //删除数据
                if(countnum>2000){
                    rrr = countnum-2000;
                    var shanchu=$(".sb"+rrr+"");
                    shanchu.html('');
                    shanchu.remove();
                }
//

                //25到35度区间生成的上数点
                if (gwlist[q].wendu >=26 && gwlist[q].wendu <= 35){
                    function RndNum(n){//随机数
                        var rnd="";
                        for(var i=0;i<n;i++){
                            rnd+=parseFloat(Math.random()*99);
                            return rnd;
                        }

                    }
                    var div=document.createElement("div");
                    div.className="chart_detail red sb"+countnum+"";
                    div.id = ""+n.cwid+"";
                    div.style.left = RndNum(2) + "%";
                    //判断温度给divtop
                    if(gwlist[q].wendu>=26&&gwlist[q].wendu<27){
                        div.style.top = parseFloat(Math.random()*(83-75+1) + 75) + "%";
                    }else if(gwlist[q].wendu>=27&&gwlist[q].wendu<28){
                        div.style.top = parseFloat(Math.random()*(75-67+1) + 67) + "%";
                    }else if(gwlist[q].wendu>=28&&gwlist[q].wendu<29){
                        div.style.top = parseFloat(Math.random()*(67-59+1) + 59) + "%";
                    }else if(gwlist[q].wendu>=29&&gwlist[q].wendu<30){
                        div.style.top = parseFloat(Math.random()*(59-51+1) + 51) + "%";
                    }else if(gwlist[q].wendu>=30&&gwlist[q].wendu<30.5){
                        div.style.top = parseFloat(Math.random()*(51-43+1) + 43) + "%";
                    }else if(gwlist[q].wendu>=30.5&&gwlist[q].wendu<31){
                        div.style.top = parseFloat(Math.random()*(47-38+1) + 38) + "%";
                    }else if(gwlist[q].wendu>=31&&gwlist[q].wendu<32){
                        div.style.top = parseFloat(Math.random()*(43-35+1) + 35) + "%";
                    }else if(gwlist[q].wendu>=32&&gwlist[q].wendu<33){
                        div.style.top = parseFloat(Math.random()*(35-27+1) + 27) + "%";
                    }else if(gwlist[q].wendu>=33&&gwlist[q].wendu<34){
                        div.style.top = parseFloat(Math.random()*(27-19+1) + 19) + "%";
                    }else if(gwlist[q].wendu>=34&&gwlist[q].wendu<35){
                        div.style.top = parseFloat(Math.random()*(19-10+1) + 11) + "%";
                    }else if(gwlist[q].wendu==35){
                        div.style.top = parseFloat(Math.random()*(11-"-3"+1) + "-3") + "%";
                    }

                    var ul=document.createElement("ul");
                    $(ul).attr('abc',n.cwid);
                    ul.className="chart_hover";
                    // + "<li>" + "阀ID：" + n.fa_id + "</li>" + "<li>" + "阀型号：" + n.faxinghao + "</li>" + "<li>" + "阀锁：" + n.fasuo + "</li>"
                    ul.innerHTML+="<li>" + n.wendu + "°C" + "</li>" + "<li>" + "用户名：" + n.username + "</li>" + "<li>" + "测温ID：" + n.cwid + "</li>" + "<li>" + "地址：" + n.address + "</li>" + "<li>" + "面积：" + n.mianji + "</li>" + "<li>" + "注册时间：" + n.register_time + "</li>" + "<li>" + "测温型号：" + n.xinghao + "</li>" + "<li>" + "典型用户：" + n.dianxing + "</li>" + "<li>" + "上数时间：：" + n.shijian + "</li>";
                    div.appendChild(ul);
                    var img=document.createElement("img");
                    img.style.width="12px";
                    img.style.height="12px";
                    img.style.display="block";
                    img.src="${ctxStatic}/swjk68.png";
                    div.appendChild(img);
                    //判断测温ID是否存在
                    if(document.getElementById(n.cwid)){
                        $("#"+n.cwid).remove();
                        countnum-1;
                    }
                    document.getElementsByClassName("chart_right_box1")[0].appendChild(div);
                    //判断如果div过度靠右鼠标经过内容将显示在左侧
                    if(div.offsetLeft > boxw ){
                        ul.style.left="-230px";
                    }
                    //闪烁动画
                    $(div).stop().animate({opacity:"0"},1000).animate({opacity:"1"},1000);
                }else if (gwlist[q].wendu>=20&&gwlist[q].wendu<26){//20到25度区间生成的上数点
                    function RndNum(n){//随机数
                        var rnd="";
                        for(var i=0;i<n;i++){
                            rnd+=parseFloat(Math.random()*99);
                            return rnd;
                        }
                    }
                    var div=document.createElement("div");
                    div.className="chart_detail red sb"+countnum+"";
                    div.id = ""+n.cwid+"";
                    div.style.left = RndNum(2) + "%";
                    //判断温度给divtop
                    if(gwlist[q].wendu>=21 && gwlist[q].wendu<22){
                        div.style.top = parseFloat(Math.random()*(70-50+1) + 50) + "%";
                    }else if(gwlist[q].wendu>=22 && gwlist[q].wendu<23){
                        div.style.top = parseFloat(Math.random()*(50-30+1) + 30) + "%";
                    }else if(gwlist[q].wendu>=23 && gwlist[q].wendu<24){
                        div.style.top = parseFloat(Math.random()*(30-10+1) + 10) + "%";
                    }else if(gwlist[q].wendu>=24 && gwlist[q].wendu<25){
                        div.style.top = parseFloat(Math.random()*(10-0+1) + 0) + "%";
                    }else if(gwlist[q].wendu>=25 && gwlist[q].wendu<26){
                        div.style.top = parseFloat(Math.random()*(-21-0+1) + 0) + "%";
                    }else if(gwlist[q].wendu>=20&&gwlist[q].wendu<21){
                        div.style.top = parseFloat(Math.random()*(80-61+1) + 65) + "%";
                    }

                    var ul=document.createElement("ul");
                    ul.className="chart_hover";
                    $(ul).attr('abc',n.cwid);
                    ul.innerHTML+="<li>" + n.wendu + "°C" + "</li>" + "<li>" + "用户名：" + n.username + "</li>" + "<li>" + "测温ID：" + n.cwid + "</li>" + "<li>" + "地址：" + n.address + "</li>" + "<li>" + "面积：" + n.mianji + "</li>" + "<li>" + "注册时间：" + n.register_time + "</li>" + "<li>" + "测温型号：" + n.xinghao + "</li>" + "<li>" + "典型用户：" + n.dianxing + "</li>" + "<li>" + "上数时间：" + n.shijian + "</li>";
                    div.appendChild(ul);
                    var img=document.createElement("img");
                    img.style.width="12px";
                    img.style.height="12px";
                    img.style.display="block";
                    img.src="${ctxStatic}/dian.png";
                    div.appendChild(img);
                    //判断测温ID是否存在
                    if(document.getElementById(n.cwid)){
                        $("#"+n.cwid).remove();
                        countnum-1;
                    }
                    document.getElementsByClassName("chart_right_box2")[0].appendChild(div);
                    //判断如果div过度靠右鼠标经过内容将显示在左侧
                    if(div.offsetLeft > boxw ){
                        ul.style.left="-230px";
                    }
                    $(div).stop().animate({opacity:"0"},1000).animate({opacity:"1"},1000);//闪烁动画
                }else if (gwlist[q].wendu>=18&&gwlist[q].wendu<20){//19到20度区间生成的上数点
                    function RndNum(n){//随机数
                        var rnd="";
                        for(var i=0;i<n;i++){
                            rnd+=parseFloat(Math.random()*99);
                            return rnd;
                        }
                    }
                    var div=document.createElement("div");
                    div.className="chart_detail green sb"+countnum+"";
                    div.id = ""+n.cwid+"";
                    div.style.left = RndNum(2) + "%";
                    //判断温度给divtop
                    if(gwlist[q].wendu>=19&&gwlist[q].wendu<20){
                        div.style.top = parseFloat(Math.random()*(46-20+1) + 0) + "%";
                    }else if(gwlist[q].wendu>=18&&gwlist[q].wendu<19){
                        div.style.top = parseFloat(Math.random()*(50-10+1) + 0) + "%";
                    }
                    var ul=document.createElement("ul");
                    ul.className="chart_hover";
                    $(ul).attr('abc',n.cwid);
                    ul.innerHTML+="<li>" + n.wendu + "°C" + "</li>" + "<li>" + "用户名：" + n.username + "</li>" + "<li>" + "测温ID：" + n.cwid + "</li>" + "<li>" + "地址：" + n.address + "</li>" + "<li>" + "面积：" + n.mianji + "</li>" + "<li>" + "注册时间：" + n.register_time + "</li>" + "<li>" + "测温型号：" + n.xinghao + "</li>" + "<li>" + "典型用户：" + n.dianxing + "</li>" + "<li>" + "上数时间：" + n.shijian + "</li>";
                    div.appendChild(ul);
                    var img=document.createElement("img");
                    img.style.width="12px";
                    img.style.height="12px";
                    img.style.display="block";
                    img.src="${ctxStatic}/swjk69.png";
                    div.appendChild(img);
                    //判断测温ID是否存在
                    if(document.getElementById(n.cwid)){
                        $("#"+n.cwid).remove();
                        countnum-1;
                    }
                    document.getElementsByClassName("chart_right_box3")[0].appendChild(div);
                    //判断如果div过度靠右鼠标经过内容将显示在左侧
                    if(div.offsetLeft > boxw ){
                        ul.style.left="-230px";
                    }
                    $(div).stop().animate({opacity:"0"},1000).animate({opacity:"1"},1000);//闪烁动画
                }else if (gwlist[q].wendu>=-5&&gwlist[q].wendu<18){//-5到19度区间生成的上数点
                    function RndNum(n){//随机数
                        var rnd="";
                        for(var i=0;i<n;i++){
                            rnd+=parseFloat(Math.random()*99);
                            return rnd;
                        }
                    }
                    var div=document.createElement("div");
                    div.className="chart_detail blue sb"+countnum+"";
                    div.id = ""+n.cwid+"";
                    div.style.left = RndNum(2) + "%";
                    //判断温度给divtop
                    if (gwlist[q].wendu>=-5&&gwlist[q].wendu<-4) {
                        div.style.top = parseFloat(Math.random()*(96-92+1) + 92) + "%";
                    }else if(gwlist[q].wendu>=-4&&gwlist[q].wendu<-3){
                        div.style.top = parseFloat(Math.random()*(92-88+1) + 88) + "%";
                    }else if(gwlist[q].wendu>=-3&&gwlist[q].wendu<-2){
                        div.style.top = parseFloat(Math.random()*(88-84+1) + 84) + "%";
                    }else if(gwlist[q].wendu>=-2&&gwlist[q].wendu<-1){
                        div.style.top = parseFloat(Math.random()*(84-80+1) + 80) + "%";
                    }else if(gwlist[q].wendu>=-1&&gwlist[q].wendu<0){
                        div.style.top = parseFloat(Math.random()*(80-76+1) + 76) + "%";
                    }else if(gwlist[q].wendu>=0&&gwlist[q].wendu<1){
                        div.style.top = parseFloat(Math.random()*(76-72+1) + 72) + "%";
                    }else if(gwlist[q].wendu>=1&&gwlist[q].wendu<2){
                        div.style.top = parseFloat(Math.random()*(72-68+1) + 68) + "%";
                    }else if(gwlist[q].wendu>=2&&gwlist[q].wendu<3){
                        div.style.top = parseFloat(Math.random()*(68-64+1) + 64) + "%";
                    }else if(gwlist[q].wendu>=3&&gwlist[q].wendu<4){
                        div.style.top = parseFloat(Math.random()*(64-60+1) + 60) + "%";
                    }else if(gwlist[q].wendu>=4&&gwlist[q].wendu<5){
                        div.style.top = parseFloat(Math.random()*(60-56+1) + 56) + "%";
                    }else if(gwlist[q].wendu>=5&&gwlist[q].wendu<6){
                        div.style.top = parseFloat(Math.random()*(52-52+1) + 46) + "%";
                    }else if(gwlist[q].wendu>=6&&gwlist[q].wendu<7){
                        div.style.top = parseFloat(Math.random()*(50-48+1) + 43) + "%";
                    }else if(gwlist[q].wendu>=7&&gwlist[q].wendu<8){
                        div.style.top = parseFloat(Math.random()*(46-44+1) + 36) + "%";
                    }else if(gwlist[q].wendu>=8&&gwlist[q].wendu<9){
                        div.style.top = parseFloat(Math.random()*(38-37+1) + 34) + "%";
                    }else if(gwlist[q].wendu>=9&&gwlist[q].wendu<10){
                        div.style.top = parseFloat(Math.random()*(34-34+1) + 30) + "%";
                    }else if(gwlist[q].wendu>=10&&gwlist[q].wendu<11){
                        div.style.top = parseFloat(Math.random()*(32-32+1) + 28) + "%";
                    }else if(gwlist[q].wendu>=11&&gwlist[q].wendu<12){
                        div.style.top = parseFloat(Math.random()*(30-30+1) + 26) + "%";
                    }else if(gwlist[q].wendu>=12&&gwlist[q].wendu<13){
                        div.style.top = parseFloat(Math.random()*(28-29+1) + 24) + "%";
                    }else if(gwlist[q].wendu>=13&&gwlist[q].wendu<14){
                        div.style.top = parseFloat(Math.random()*(24-24+1) + 20) + "%";
                    }else if(gwlist[q].wendu>=14&&gwlist[q].wendu<15){
                        div.style.top = parseFloat(Math.random()*(22-20+1) + 12) + "%";
                    }else if(gwlist[q].wendu>=15&&gwlist[q].wendu<16){
                        div.style.top = parseFloat(Math.random()*(17-19+1) + 9) + "%";
                    }else if(gwlist[q].wendu>=16&&gwlist[q].wendu<17){
                        div.style.top = parseFloat(Math.random()*(15-18+1) + 6) + "%";
                    }else if(gwlist[q].wendu>=17&&gwlist[q].wendu<17.5){
                        div.style.top = parseFloat(Math.random()*(10-11+1) + 1.5) + "%";
                    }else if(gwlist[q].wendu>=17.5&&gwlist[q].wendu<18){
                        div.style.top = parseFloat(Math.random()*(1-2+1) + 0) + "%";
                    }

                    var ul=document.createElement("ul");
                    ul.className="chart_hover";
                    $(ul).attr('abc',n.cwid);
                    ul.innerHTML+="<li>" + n.wendu + "°C" + "</li>" + "<li>" + "用户名：" + n.username + "</li>" + "<li>" + "测温ID：" + n.cwid + "</li>" + "<li>" + "地址：" + n.address + "</li>" + "<li>" + "面积：" + n.mianji + "</li>" + "<li>" + "注册时间：" + n.register_time + "</li>" + "<li>" + "测温型号：" + n.xinghao + "</li>" + "<li>" + "典型用户：" + n.dianxing + "</li>" + "<li>" + "上数时间：" + n.shijian + "</li>";
                    div.appendChild(ul);
                    var img=document.createElement("img");
                    img.style.width="12px";
                    img.style.height="12px";
                    img.style.display="block";
                    img.src="${ctxStatic}/swjk70.png";
                    div.appendChild(img);
                    //判断测温ID是否存在
                    if(document.getElementById(n.cwid)){
                        $("#"+n.cwid).remove();
                        countnum-1;
                    }
                    document.getElementsByClassName("chart_right_box4")[0].appendChild(div);
                    //判断如果div过度靠右鼠标经过内容将显示在左侧
                    if(div.offsetLeft > boxw ){
                        ul.style.left="-230px";
                    }
                    $(div).stop().animate({opacity:"0"},1000).animate({opacity:"1"},1000);//闪烁动画
                }else if (gwlist[q].wendu>35||gwlist[q].wendu<-5){//-5到19度区间生成的上数点
                    function RndNum(n){//随机数
                        var rnd="";
                        for(var i=0;i<n;i++){
                            rnd+=parseFloat(Math.random()*99);
                            return rnd;
                        }
                    }
                    var div=document.createElement("div");
                    div.className="chart_detail blue sb"+countnum+"";
                    div.id = ""+n.cwid+"";
                    div.style.left = RndNum(2) + "%";
                    //判断温度给divtop


                    var ul=document.createElement("ul");
                    ul.className="chart_hover";
                    $(ul).attr('abc',n.cwid);
                    ul.innerHTML+="<li>" + n.wendu + "°C" + "</li>" + "<li>" + "用户名：" + n.username + "</li>" + "<li>" + "测温ID：" + n.cwid + "</li>" + "<li>" + "地址：" + n.address + "</li>" + "<li>" + "面积：" + n.mianji + "</li>" + "<li>" + "注册时间：" + n.register_time + "</li>" + "<li>" + "测温型号：" + n.xinghao + "</li>" + "<li>" + "典型用户：" + n.dianxing + "</li>" + "<li>" + "上数时间：" + n.shijian + "</li>";
                    div.appendChild(ul);
                    var img=document.createElement("img");
                    img.style.width="12px";
                    img.style.height="12px";
                    img.style.display="block";
                    img.src="${ctxStatic}/swjk70.png";
                    div.appendChild(img);
                    //判断测温ID是否存在
                    if(document.getElementById(n.cwid)){
                        $("#"+n.cwid).remove();
                        countnum-1;
                    }
                    document.getElementsByClassName("chart_right_box4")[0].appendChild(div);
                    //判断如果div过度靠右鼠标经过内容将显示在左侧
                    if(div.offsetLeft > boxw ){
                        ul.style.left="-230px";
                    }
                    //$(div).stop().animate({opacity:"0"},1000).animate({opacity:"1"},1000);//闪烁动画
                    $(div).hide();
                }


                //点击上数点跳页到平均温度页
                $('.chart_detail').click(function(){
                    var theId=$(this).find('ul').attr('abc');
                    window.location.href="/temp/real/?searchuser="+theId;
                });
            }
            q++;//向上取整//

//	  	当走完1000个再取在走
            if(table_rows==q){
                clearInterval(q_sel);
                data = { lasttime: a, need: b, level_type: c, level_name: d }
                $.ajax({ type:'POST',
                    url:url,
                    data:data,
                    success: function( result ) {
                        q = 0;
                        gwlist = [];
                        T = result['data'];
                        for( i in T ){
                            totalnum ++;
                            gwlist.push( {
                                id:totalnum,
                                wendu:T[i]['temp'],
                                username:T[i]['host'],
                                cwid:T[i]['heatid'],
                                address:T[i]['addr'],
                                mianji:T[i]['square'],
                                register_time:T[i]['regdate'],
                                xinghao:T[i]['htype'],
                                dianxing:T[i]['classic'],
                                fa_id:T[i]['valveid'],
                                faxinghao:T[i]['vtype'],
                                fasuo:T[i]['vlock'],
                                shijian:T[i]['temptime'],
                            } );

                        }
                        table_rows = T.length;
                        jhb = result['lasttime'];
                        animate_sel(jhb,b,c,d,jj,table_rows);

                    },
                    error: function( result ) { },
                } );
            }
        },30);

        //当循环出3000条数目后再向后台获取3000条数据





        //点击上数点跳页到平均温度页
        $('.chart_detail').click(function(){
            var theId=$(this).find('ul').attr('abc');
            window.location.href="/temp/real/?searchuser="+theId;
        });
    }

</script>

<script>
    var chart_m = $(".content").width() * 0.04;
    $(".chart_right").width($(".content").width() - chart_m - 50 + "px");
    //清空
    $("#clear_btn").click(function (){
        $(".ui-datepicker-time").val("");
        $(".one_btn_text").val("");
        $(".one_btn_text").attr("title","");
        $(".head_box2_search").val("");
    });

</script>
<% } %>